import React, { PureComponent } from 'react';
import { Chart, Geom, Axis, Tooltip, Label } from 'bizcharts';
import style from './index.less';

class AppSmsReceiveWeekly extends PureComponent {
  render() {
    const { smsReceiveSuccessChartData, smsReceiveFailureRatio } = this.props;
    const smsDataScale = {
      y: {
        tickCount: 5,
        alias: '条数',
        type: 'pow',
      },
    };

    const smsFailureScale = {
      y: {
        tickCount: 5,
        alias: '失败率',
        type: 'pow',
      },
    };

    const smsFailureTooltipCfg = {
      custom: true,
      containerTpl: `<div class="g2-tooltip"><div class="g2-tooltip-title" style="margin-bottom: 4px;"></div><ul class="g2-tooltip-list"></ul></div>`,
      itemTpl: `<li data-index={index}><span style="background-color:{color};width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:8px;"></span>{name}: {value}%</li>`,
    };

    return (
      <div>
        {smsReceiveSuccessChartData.length ? (
          <div style={{ padding: '20px', background: '#FFFFFF', width: '49.5%', float: 'left' }}>
            <Chart height={300} data={smsReceiveSuccessChartData} scale={smsDataScale} forceFit>
              <span className={style.mainTitle}>一周短信接收成功数量(条)</span>
              <Axis name="x" />
              <Axis name="y" />
              <Tooltip
                crosshairs={{
                  type: 'y',
                }}
              />
              <Geom type="line" position="x*y" size={2} />
              <Geom
                type="point"
                position="x*y"
                size={4}
                shape="circle"
                style={{
                  stroke: '#fff',
                  lineWidth: 1,
                }}
              >
                <Label
                  content={['x*y', (x, y) => `${y}`]}
                  textStyle={{
                    textAlign: 'center', // 文本对齐方向，可取值为： start middle end
                    fill: '#404040', // 文本的颜色
                    fontSize: '12', // 文本大小
                    fontWeight: 'normal', // 文本粗细
                    rotate: 0, // 文字旋转
                    textBaseline: 'top', // 文本基准线，可取 top middle bottom，默认为middle
                  }}
                />
              </Geom>
            </Chart>
          </div>
        ) : (
          <div
            style={{
              padding: '20px',
              background: '#FFFFFF',
              width: '49.5%',
              float: 'left',
              textAlign: 'center',
            }}
          >
            一周短信接收成功数量暂无数据
          </div>
        )}
        {smsReceiveFailureRatio.length ? (
          <div style={{ padding: '20px', background: '#FFFFFF', width: '49.5%', float: 'right' }}>
            <Chart height={300} data={smsReceiveFailureRatio} scale={smsFailureScale} forceFit>
              <span className={style.mainTitle}>一周短信接收失败率(%)</span>
              <Axis name="x" />
              <Axis name="y" />
              {/* <Tooltip
                crosshairs={{
                  type: 'y',
                }}
              /> */}
              <Tooltip {...smsFailureTooltipCfg} />
              <Geom type="line" position="x*y" size={2} color="#FF4500" shape="smooth" />
              <Geom
                type="point"
                position="x*y"
                size={4}
                shape="circle"
                color="#FF4500"
                style={{
                  stroke: '#FF6347',
                  lineWidth: 1,
                }}
              >
                <Label
                  content={['x*y', (x, y) => `${y}%`]}
                  textStyle={{
                    textAlign: 'center', // 文本对齐方向，可取值为： start middle end
                    fill: '#404040', // 文本的颜色
                    fontSize: '12', // 文本大小
                    fontWeight: 'normal', // 文本粗细
                    rotate: 0, // 文字旋转
                    textBaseline: 'top', // 文本基准线，可取 top middle bottom，默认为middle
                  }}
                />
              </Geom>
            </Chart>
          </div>
        ) : (
          <div
            style={{
              padding: '20px',
              background: '#FFFFFF',
              width: '49.5%',
              float: 'right',
              textAlign: 'center',
            }}
          >
            一周短信接收失败率暂无数据
          </div>
        )}
      </div>
    );
  }
}
export default AppSmsReceiveWeekly;
